<template>
  <div class="kjk">
    <div class="needs">
      <img src="@/assets/41.png" class="img24" @click="handleAvatarClick" />
      <div class="wz">
        <p>您想购买的养生产品可以告诉我们</p>
        <p>或许我们有更具性价比的货源。你提需求我来找。</p>
      </div>
    </div>
    <div class="cont">
      <a-flex>
        <div class="sta" @click="search(0)" :class="index == 0 ? 'xz' : 'wx'">
          待反馈
          <img :src="index == 0 ? xz : wx" class="img16" />
        </div>
        <div class="sta" @click="search(1)" :class="index == 1 ? 'xz' : 'wx'">
          已反馈
          <img :src="index == 1 ? xz : wx" class="img16" />
        </div>
      </a-flex>
      <div class="scl">
        <div
          class="dsfert"
          v-for="(item, index) in treatList"
          :key="index"
          @click="goDetail(item)"
        >
          <img :src="item.feedbackPhoto" class="img62" />
          <a-flex class="ahskd">
            <a-typography-text class="title">
              {{ item.feedbackContent }}
            </a-typography-text>
            <a-typography-text class="fkTime">
              {{ item.createTime }}</a-typography-text
            >
          </a-flex>
          <img :src="item.status == '0' ? dfk : yfk" class="dfk" />
        </div>
        <div class="nod">
          {{ treatList.length > 0 ? '没有更多了' : '暂无数据' }}
        </div>
      </div>
    </div>
    <van-button type="default" block class="add" @click="add"
      >新建需求</van-button
    >
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { feedbackList, addFeedback, updateFeedback } from '@/api/api'
import xz from '@/assets/27.png'
import wx from '@/assets/29.png'
import dfk from '@/assets/35.png'
import yfk from '@/assets/14.png'
const router = useRouter()
const treatList = ref([])
const userInfo = ref({})
const index = ref(null)
onBeforeMount(() => {
  userInfo.value = JSON.parse(localStorage.getItem('userInfo'))
  getList(null)
})
const search = (v) => {
  // 双击就会取消选中
  if (index.value == v) {
    index.value = null
  } else {
    index.value = v
  }
  getList(index.value)
}
const getList = (v) => {
  feedbackList({ memberId: userInfo.value.id, status: v }).then((res) => {
    if (res.code == 200) {
      res.rows?.forEach((item) => {
        item.feedbackPhoto = item.feedbackPhoto.split(',')[0]
      })
      treatList.value = res.rows
    }
  })
}
const handleAvatarClick = () => {
  router.push({ path: '/my' })
}
const add = () => {
  router.push({ path: '/needsAdd' })
}
const goDetail = (item) => {
  console.log('item: ', item)
  if (item.status == 0) {
    return
  }
  router.push({ path: '/needsDetail', query: { id: item.id } })
}
</script>

<style scoped lang='less'>
.kjk {
  height: 100vh;
  background: #fcfaf4;
  .needs {
    width: 100%;
    height: 172px;
    background: url('@/assets/130.png') no-repeat;
    padding: 16px;
    background-size: cover;
    position: relative;
    .img24 {
      position: absolute;
      top: 40px;
      left: 20px;
    }
    .wz {
      margin-left: 20px;
      width: 308px;
      height: 48px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #6d4615;
      line-height: 30px;
      text-align: left;
      font-style: normal;
      position: absolute;
      bottom: 40px;
      left: 20px;
    }
  }
  .cont {
    padding: 16px;
    .sta {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      line-height: 22px;
      text-align: left;
      font-style: normal;
      margin-right: 20px;
    }
    .xz {
      color: rgba(0, 0, 0, 0.85);
    }
    .wx {
      color: rgba(0, 0, 0, 0.25);
    }
    .scl {
      margin-top: 30px;
      max-height: calc(100vh - 346px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      .dsfert {
        padding: 24px;
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 128px;
        background: #ffffff;
        box-shadow: 0px 6px 10px 0px rgba(75, 38, 0, 0.06);
        border-radius: 12px;
        margin-bottom: 16px;
        overflow: hidden;
        position: relative;
        .ahskd {
          width: 70%;
          padding-left: 10px;
          display: flex;
          flex-direction: column;
          // justify-content: space-between;

          .title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.85);
            line-height: 20px;
            text-align: left;
            font-style: normal;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 限制显示两行 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .fkTime {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.5);
            line-height: 20px;
            text-align: left;
            font-style: normal;
            margin-top: 8px;
          }
        }
        .dfk {
          position: absolute;
          bottom: 24px;
          right: 24px;
        }
      }
      .nod {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.25);
        line-height: 17px;
        text-align: center;
        font-style: normal;
        margin-top: 32px;
      }
    }
  }
  .add {
    width: 90%;
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    height: 48px;
    background: #3c7058;
    border-radius: 24px;
    color: #fff;
  }
}
</style>